<template>
  <div class="layout">
    <div class="item" v-for="(item, index) in 6" :key="index">
      <div class="title">
        <span>待办工作</span>
        <span>更多</span>
      </div>
      <div class="content">
        <div class="info" v-for="item in 4" :key="item">
          <div class="left">
            <el-image
              src="https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png"
              fit="cover"
            ></el-image>
            <div class="txt">
              <span>请假申请</span>
              <span>郑婷雅、王萌萌、周莎莎向你发来请假申请~</span>
            </div>
          </div>
          <div class="right">
            <el-badge class="my-badge" :value="1"> </el-badge>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { ref, reactive } from 'vue'
</script>

<style lang="scss" scoped>
.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  .item {
    padding: 20px 20px;
    height: 452px;
    background-color: #fff;

    .title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      line-height: 24px;
      color: #000000;

      span:nth-child(2) {
        font-size: 12px;
        line-height: 20px;
        color: #409eff;
        cursor: pointer;
      }
    }

    .content {
      .info {
        margin-bottom: 16px;
        padding: 18.5px 16px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .el-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
          }

          .txt {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 12px;
            line-height: 20px;
            color: #606266;

            span:nth-child(1) {
              font-size: 14px;
              line-height: 24px;
              color: #131414;
            }
          }
        }
      }
    }
  }
}
</style>
